<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标进入和离开</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: palegreen;
				margin-bottom: 10px;
			}
		</style>
		<script>
			//不能写多个同名function
			//多个标签可以使用同一个事件名
			function change_color(){
				document.getElementById("box2").style.backgroundColor="deeppink";
				document.getElementById("box2").style.width="300px";
				document.getElementById('box2').style.height='300px';
				document.getElementById('box2').style.border='2px solid blue';
			}
			function recover(){
				document.getElementById("box2").style.backgroundColor="palegreen";
				document.getElementById("box2").style.width="100px";
				document.getElementById('box2').style.height='100px';
				document.getElementById('box2').style.border='none';
			}
		</script>
	</head>
	<body>
		<div onmouseover="change_color()" onmouseout="recover()"></div>
		<button onmouseover="change_color()" onmouseout="recover()">点我有惊喜</button>
		
		<div id="box2"></div>
	</body>
</html>
